<style>
    .base-set-box {
        padding: 30px 30px 80px;
        background: #fff;
    }

    .form-box {
        padding-top: 40px
    }

    .departmentPopup {
        width:600px;
        height:481px;
    }

    .plan-list .el-dialog__header {
        padding:40px 0 30px !important;
    }

    .departmentCont {
        width:100%;
        height:270px;
        padding:24px 0 0 24px;
        border-radius:2px;
        border:1px solid rgba(225,231,235,1);
        overflow-y: auto;
        box-sizing:border-box;
    }


    .el-tree-node__content {
        height: 30px;
        line-height: 30px;
    }

    .simulation-input {
        position: relative;
        font-size: 14px;
        display:flex;
        width: 340px;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #d8dce5;
        padding: 0 15px;
        box-sizing:border-box;
        height:38px;
        line-height: 38px;
        align-items: center;
        justify-content: space-between;
    }

    .simulation-input em {
        font-style:normal;
    }

    .simulation-input i {
        color:#b4bccc;
    }
</style>
<template>
<section class="plan-list">
    <div class="base-set-box">
        <div class="form-box">
            <el-form  :model="form" :rules="rules" ref="form" label-width="120px">
                <el-form-item label="所属组织" prop="DepartmentID">
                    <div @click="departmentState = true">
                        <span class="input simulation-input"><em>{{ selectName }}</em><i class="el-icon-arrow-down"></i></span>
                        <el-input class="input" v-model="form.DepartmentID" suffix-icon="el-icon-arrow-down" placeholder="请输入员工姓名" style="display:none"></el-input>
                    </div>
                </el-form-item>


                <el-form-item label="姓名" prop="Username" >
                    <el-input class="input" v-model="form.Username" maxlength="4" placeholder="请输入员工姓名"></el-input>
                </el-form-item>

                <el-form-item label="手机号" prop="Mobile">
                    <el-input class="input" v-model="form.Mobile" maxlength="11" placeholder="请输入员工手机号"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="Email">
                    <el-input class="input" v-model="form.Email" maxlength="30" placeholder="请输入员工邮箱"></el-input>
                </el-form-item>

                <el-form-item label="工号" prop="EmployeeNo" >
                    <el-input class="input" v-model="form.EmployeeNo" maxlength="30" placeholder="请输入员工工号"></el-input>
                </el-form-item>
                <el-form-item label="别名" prop="Aliasname">
                    <el-input class="input" v-model="form.Aliasname" maxlength="30" placeholder="请输入员工别名"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button class="dialog-btn-save" type="primary" @click="submitForm('form')">确定</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <el-dialog
        title="选择部门"
        :visible.sync="departmentState"
        width="30%"
        center>
        <div class="departmentCont">
            <el-tree
                :data="departmentSelectList"
                :props="props"
                node-key="DepartmentID"
                default-expand-all
                :highlight-current="true"
                @node-click="handleNodeClick">
            </el-tree>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="departmentState = false">取 消</el-button>
            <el-button type="primary" @click="configBtn">确 定</el-button>
        </span>
    </el-dialog>
</section>
</template>
<script>
import qs from 'qs'

export default {


    data() {
         let validPhone = (rule, value,callback)=>{ // 只能手机号码
            if (!value){
                callback(new Error('请输入联系电话'))
            }else  if(!(/^1\d{10}$/.test(value))){
                callback(new Error('手机号码有误，请重填'))
                return false
            }else{
                callback();
            }

        };
        return {
            path:[
                {
                    'name':'组织机构',
                    'path':'/organization/member-list'
                },
                {
                    'name':'员工管理',
                    'path':'/organization/member-list'
                },
                {
                    'name':'添加员工',
                    'path':''
                }
            ],

            departmentState:false,
            departmentSelectList:[],
            selectDepartment:{},
            selectName:'',
            props: {
                label: 'DepartmentName',
                children: 'Child'
            },
            form:{
                EmployeeID:'',
                Username:'',
                Aliasname:'',
                EmployeeNo:'',
                Mobile:'',
                Email:'',
                DepartmentID:'',
                Level:''
            },
            employeeID:'',
            rules: {

                Username: [
                    { required: true, message: '请输入员工姓名', trigger: 'blur' },
                ],

                Mobile: [
                    { required: true, message: '请输入员工手机号', trigger: 'blur'},
                    { trigger: 'blur', validator: validPhone }
                ],

                DepartmentID: [
                    { required: true, message: '请输入员工所属组织', trigger: 'blur'}
                ]
            }
        }
    },
    watch: {
        'form.Mobile'(value) {
            this.$nextTick(() => {
                this.form.Mobile = value.replace(/\D/g, '')
            })
        }
    },

    methods:{
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if( this.employeeID != '') {
                        this.editFn()
                    } else {
                        this.addFn()
                    }
                }
            })
        },

        editFn() {
            axios.post('/com/employee/edit', qs.stringify({
                employeeID:this.employeeID,
                username:this.form.Username,
                employeeNo:this.form.EmployeeNo,
                aliasname:this.form.Aliasname,
                mobile:this.form.Mobile,
                email:this.form.Email,
                departmentID:this.form.DepartmentID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$router.push('/organization/member-list')
                } else {
                    this.$message.error(d.msg)
                }
            })
        },

        addFn() {
            axios.post('/com/employee/add', qs.stringify(this.form)).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$router.push('/organization/member-list')
                }else {
                    this.$message.error(d.msg)
                }
            })

        },

        getDepartmentList() {
            axios.post('/com/department/getDepartmentTree').then( (res) => {
                var d = res.data
                if(d.flag == 1){
                    this.departmentSelectList = d.data.Row
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        employeeInfo(EID) {
            axios.post('/com/employee/employeeInfo', qs.stringify({
                employeeID:EID
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.form = d.data.EmployeeInfo
                    this.selectName = this.form.DepartmentName
                }else {
                    this.$message.error(d.msg)
                }
            })
        },



        handleNodeClick(data) {
            this.selectDepartment = data
        },

        configBtn() {
            this.form.DepartmentID = this.selectDepartment.DepartmentID
            this.selectName = this.selectDepartment.DepartmentName
            this.departmentState = false
        }
    },

    mounted() {
        this.getDepartmentList()

        if(!!this.$route.query.employeeID) {
            this.employeeID = this.$route.query.employeeID
            this.employeeInfo(this.$route.query.employeeID)
            this.path = [
                {
                    'name':'组织机构',
                    'path':'/organization/member-list'
                },
                {
                    'name':'员工管理',
                    'path':'/organization/member-list'
                },
                {
                    'name':'修改员工',
                    'path':''
                }
            ]
            this.$store.commit('setPath', this.path)
        } else {
            this.$store.commit('setPath', this.path)
        }
    }
}
</script>
